<template>
	<view>
		<u-bar-height></u-bar-height>

		<view class="top_box" :style="{top: barHeight + 'px'}">
			<u-search-input :show="showBack" :action="false" :words="keyword"></u-search-input>
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#dd524d" @clickItem="onClickItem" />
			</view>
		</view>
		
		<view class="content_box">
			<swiper class="swiper" :current="current" :style="{height: boxHeight +'px'}">
				<swiper-item>
					<view class="swiper_box margin_top_10" id="swiper_box_0">
						<!-- 综合 -->
						<uni-section title="可能感兴趣" type="line" padding="10">
							<view class="swiper_box_item" @tap="jumpArtist(artist.id)">
								<view class="avatar"><image :src="artist.picUrl" class="avatar_border"></image></view>
								<view class="info">
									<view v-if="artist.name">歌手：{{artist.name}}</view>
									<view v-if="artist.fansSize">
										<text>粉丝：{{artist.fansSize}}万 </text>
										<text style="margin-left: 10px">歌曲：{{artist.musicSize}}</text>
									</view>
								</view>
							</view>
							
							<!-- <swiper class="swiper" scroll-x="true" style="height: 80px">
								<swiper-item  class="swiper-item" v-for="(item, index) in albums" :key="index">
									<view class="swiper_box_item-x" @tap="jumpAlbum(item.id)">
										<view class="avatar"><image :src="item.picUrl" mode=""></image></view>
										<view class="info">
											<view>专辑：{{item.name}}</view>
											<view>{{item.artist.name}}</view>
										</view>
									</view>
								</swiper-item>
							</swiper> -->
						</uni-section>
						
						<!-- 单曲 -->
						<!-- <uni-section title="单曲" type="line">
							<u-single-list-image :list="searchResult.songs" @singleHasMore='onClickItem' :geDanFunctions="geDanFunctions" :show="false" :refs="ref"></u-single-list-image>
						</uni-section> -->
						
						<!-- 歌单 -->
						<!-- <uni-section title="歌单" type="line">
							<u-song-list :list="searchResult.playLists" :showLoadMore="false" @songHasMore='onClickItem'></u-song-list>
						</uni-section>	 -->
					</view>
				</swiper-item>
				<swiper-item>
					<view id="swiper_box_1">
						<u-single-list :list="songList" :geDanFunctions="geDanFunctions" :loadStatus="loadStatus" :refs="ref" :show="false"></u-single-list>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper_box" id="swiper_box_2">
						<u-song-list :list="songSheet" :loadStatus="loadStatus" :showLoadMore="true"></u-song-list>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper_box" id="swiper_box_3">
						<u-video-list :list="MVlist" :loadStatus="loadStatus"></u-video-list>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="playerBox" style="display: none;">
			<u-player-control></u-player-control>
		</view>
		
		<u-popup-list :list="geDanFunctions" :refs="ref"></u-popup-list>
	</view>
</template>

<script>
	import {searchMultimatch, mergeSearch, search} from '@/API/API.js';
	import util from '@/utils/util.js';
	export default{
		data(){
			return{
				keyword: '',
				items: ['综合', '单曲', '歌单', '视频'],
				current: 0,
				showBack: true,
				artist: [],
				albums: [],
				searchResult: {
					songs: {
						songs: [],
						moreText: ''
					},
					playLists: {
						playLists: [],
						moreText: ''
					},
				},
				boxHeight: 581,
				offset: 0,
				dataCount: 0,
				songList: [],
				loadStatus: 'loading',
				isLoadMore: false, 
				geDanFunctions: [
					{text: '收藏', type: 'collection'},
					{text: '添加歌单', type: 'add'},
					{text: '查看歌手', type: 'select'}
				],
				songSheet: {
					playLists:[]
				},
				MVlist: [],
				scrollTop: 0,
				ref: 'playListPopup',
				barHeight: 0
			}
		},
		
		onLoad(option){		
			this.keyword = option.keyword;
			this.searchMultimatch(this.keyword);
			// this.search({keywords: this.keyword, offset: this.offset, type: 1});
			// this.search({keywords: this.keyword, offset: this.offset, type: 1000});
			// this.mergeSearch(this.keyword);
		},
		
		mounted() {
			this.elementHeight('#swiper_box_'+ this.current, 1200);
			this.barHeight = getApp().globalData.barHeight;
		},
		
		methods: {			
			onClickItem(e) {
				this.offset = 0;
				this.dataCount = 0;
				uni.pageScrollTo({ scrollTop: 0, duration: 300 });
				
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
				
				this.elementHeight('#swiper_box_'+ this.current, 1200);
				if(e.currentIndex == 1){
					this.search({keywords: this.keyword, offset: this.offset, type: 1});
				}else if(e.currentIndex == 2){
					this.search({keywords: this.keyword, offset:  this.offset, type: 1000});
				}else if(e.currentIndex == 3){
					this.search({keywords: this.keyword, offset:  this.offset, type: 1014});
				}

			},
			
			searchMultimatch(keyword){
				searchMultimatch({keywords: keyword}).then(data => {
					let result = data.result;
					
					if ( typeof result.artist == 'undefined') { 
					    this.artist['id'] = result.album[0].id;
					    this.artist['name'] = result.album[0].name;
						this.artist['picUrl'] = result.album[0].picUrl;
					}else{
						this.artist['id'] = result.artist[0].id;
						this.artist['name'] = result.artist[0].name;
						this.artist['fansSize'] = (result.artist[0].fansSize / 1000).toFixed(2);
						this.artist['musicSize'] = result.artist[0].musicSize;
						this.artist['picUrl'] = result.artist[0].picUrl;
					}
				});
			},

			mergeSearch(keyword){
				mergeSearch({keywords: keyword, type: 3}).then(data => {
					let result = data.result
					console.log(result)
					// this.searchResult.songs.songs = result.song.songs;
					// this.searchResult.songs.moreText = result.song.moreText;
					// this.albums = result.album.albums;
					
					// this.searchResult.playLists.moreText = result.playList.moreText;
					// this.searchResult.playLists.playLists = result.playList.playLists;
				});
			},
			
			search(data){
				let type = data.type;
				search(data).then(data => {
					if(type == 1){
						this.songList = this.songList.concat(data.result.songs);
						this.dataCount = data.result.songCount;
						if(this.songList.length < data.result.songCount){
							this.isLoadMore = true;                                           
							this.loadStatus = 'loading';
						}else{
							this.isLoadMore = false;
							this.loadStatus = 'noMore';
						}
					}else if(type == 1000){
						this.songSheet.playLists = this.songSheet.playLists.concat(data.result.playlists);		
						this.dataCount = data.result.playlistCount;
						this.songSheet.playLists.moreText= "";
						if(this.songSheet.playLists.length < data.result.playlistCount){
							this.isLoadMore = true;                                           
							this.loadStatus = 'loading';
						}else{
							this.isLoadMore = false;
							this.loadStatus = 'noMore';
						}
					}else if(type === 1014){
						this.MVlist = this.MVlist.concat(data.result.videos);
						this.dataCount = data.result.videoCount;
						if(this.MVlist.length < data.result.videoCount){
							this.isLoadMore = true;                                           
							this.loadStatus = 'loading';
						}else{
							this.isLoadMore = false;
							this.loadStatus = 'noMore';
						}
					}
					
					this.elementHeight('#swiper_box_'+ this.current, 700);
				});
			},
			
			elementHeight(ele, time){
				setTimeout(()=>{
					const query = uni.createSelectorQuery().in(this);
					query.select(ele).boundingClientRect(data => {
						this.boxHeight = data.height + 14;
					}).exec()
				}, time);
			},
			
			onReachBottomData(fun){
				this.offset = this.offset + 15;
				if(this.dataCount - this.offset < 0)
					this.offset = this.dataCount;
			
				uni.$emit(fun, this.keyword, this.offset);
				uni.$once('search', this.search);
			},
			
			jumpArtist(id){
				util.jump('navigateTo', '/pages/artist/artist?id='+ id);
			},
			
			jumpAlbum(id){
				util.jump('navigateTo', '/pages/album/album?id='+ id);
			}
		},
		
		onUnload(){
			uni.$emit('closePopup', this.ref);
		},
		
		onReachBottom(){
			if(this.current === 1 && this.isLoadMore)
				this.onReachBottomData('singleListOnReachBottom');
			else if(this.current === 2 && this.isLoadMore)
				this.onReachBottomData('songListOnReachBottom');
			else if(this.current === 3 && this.isLoadMore)
				this.onReachBottomData('videoListOnReachBottom');
		}
	}
</script>

<style>
	@import url("@/static/css/iconfont.css");
	.top_box{
	    position: fixed;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    width: 100%;
	    height: 86px;
	    margin-bottom: 86px;
	    z-index: 9;	  
	}
	
	.uni-common-mt{
		background-color: #fff;
	}
	
	.content_box{
		margin-top: 86px;
	}
	
	.swiper {
		width: 100%;
		padding-bottom: 28px;
		/* height: 1150px; */
	}
		
	.swiper .swiper_box{
		margin: 0 auto;
		border-radius: 16px;
	}
	
	/deep/.uni-section{
		border-radius: 10px;
		margin-bottom: 10px;
	}
	
	.swiper .swiper_box .swiper_box_item-x{
		display: flex;
		align-items: center;
		padding: 0 20px;
		padding-bottom: 20px;
	}

	.swiper .swiper_box .swiper_box_item{
		display: flex;
		align-items: center;
		padding: 0 20px;
		padding-bottom: 20px;
	}
	
	.swiper .swiper_box .swiper_box_item-x .avatar,
	.swiper .swiper_box .swiper_box_item .avatar{
		width: 60px;
		height: 60px;
		margin-right: 8px;
	}
	
	.swiper .swiper_box .swiper_box_item-x .avatar image,
	.swiper .swiper_box .swiper_box_item .avatar image{
		width: 100%;
		height: 100%;
	}
	
	.swiper .swiper_box .swiper_box_item-x .info,
	.swiper .swiper_box .swiper_box_item .info{
		height: 60px;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		font-size: 13px;
		line-height: 2;
	}
	
	.swiper .swiper_box .swiper_box_item .swiper_box_item_content{
		font-size: 12px;
		color: #585555;
	}
	
	.swiper .swiper_box .swiper_box_item .swiper_box_item_content view:first-child {
		font-size: 13px;
		color: #000;
	}
	
	.avatar_border{
		border-radius: 50%;
	}
	
	.justify_content{
		justify-content: space-between;
	}
	
	.swiper-item:nth-child(2){
		transform: translate(50%, 0px) translateZ(0px) !important;
	}
	
	.swiper-item:nth-child(3){
		transform: translate(100%, 0px) translateZ(0px) !important;
	}
	
	.playerBox{
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom); 
	}
</style>